<template>
    <!--    description: "<p>11</p><p>22</p><p>33</p>"
    first_cateid: 2
    firstcatename: "手机通讯"
    goodsname: "小米10"
    id: 1
    img: "/uploads/d6a0eff0-70be-11ea-91a2-9395060d7390.jpg"
    ishot: 1
    isnew: 2
    market_price: 3999
    number: 100
    price: 3999
    second_cateid: 10
    secondcatename: "诺基亚手机"
    specsattr: "白色,黑色"
    specsid: 3
    status: 1 -->
    <el-container>
        <el-table :data="goodsmList" stripe   style="width:100%">
            <el-table-column prop="id" label="编号" width="200" align="center">
            </el-table-column>

            <el-table-column prop="img" label="商品图片" width="200" align="center">
                <template v-slot="prop">
                    <img :src="'http://localhost:3000/'+prop.row.img" class="goodsimg">
                </template>

            </el-table-column>


            <el-table-column prop="goodsname" label="商品名称" width="200" align="center">
            </el-table-column>


            <el-table-column prop="firstcatename" label="商品名称" width="200" align="center">
            </el-table-column>


            <el-table-column prop="secondcatename" label="所属二级名称" width="200" align="center">
            </el-table-column>


            <el-table-column prop="specsattr" label="商品规格" width="200" align="center">
                <template v-slot="prop">
                    <el-button style="width: 50px;" type="success" plain
                        v-for='(item,index) in prop.row.specsattr.split(",")' :key="index"> {{item}} </el-button>



                </template>
            </el-table-column>



            <el-table-column prop="statusr" label="是否启用" width="200" align="center">
            </el-table-column>



            <el-table-column label="操作" width="160" fixed="right">

                <template>

                    <el-button type="primary" icon="el-icon-edit" circle></el-button>
                    <el-button type="danger" icon="el-icon-delete" circle></el-button>
                </template>
            </el-table-column>


        </el-table>
        <el-pagination background :page-size="goodsmData.size" layout="prev, pager, next" 
            @current-change="handleCurrentChange" @prev-click="handleCurrentChange" @next-click="handleCurrentChange" :total="goodsmCount" :current-page="goodsmData.page" >
        </el-pagination>
    </el-container>
            </div>
</template>

<script>
    import {
        mapState,
        mapActions
    } from 'vuex'
    export default {
        data() {
            return {
                goodsmData: {
                    
                    page:1,
                    size:"5"

                }
            }
        },
        created() {
            this.getGoodsMListActions(this.goodsmData)
            this.getGoodsMCountListActions()
        },
        computed: {
            ...mapState({
                goodsmList: state => state.goodsm.goodsmList,
                goodsmCount: state => state.goodsm.goodsmCount
            })
        },
        methods: {
            ...mapActions("goodsm", ['getGoodsMListActions', 'getGoodsMCountListActions']),
            handleCurrentChange(val) {
                this.goodsmData.page = val
                console.log(this.goodsmData,"%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%")
                this.getGoodsMListActions(this.goodsmData)
            }
        },
        components: {
               
        }
    }
</script>
<style scoped>
    .el-button {
        text-align: center;
        padding: 5px;
    }

    .goodsimg {
        width: 40px;
        height: 50px;
    }

    .el-pagination {
        text-align: center;
        margin-top: 20px;
    }

    .el-table {
        overflow: scroll;
    }

    .el-container {
        display: flex;
        flex-direction: column;
    }
</style>